
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动漫收藏 | 我的观看清单</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#5B8FB9',
                        secondary: '#B6CEE8',
                        accent: '#F0F7EE',
                        dark: '#2A3B4C',
                        light: '#F9FBFD',
                        // 状态颜色
                        watched: '#10B981',      // 已看完 - 绿色
                        watching: '#3B82F6',     // 部分观看 - 蓝色
                        notWatched: '#F59E0B'    // 未看 - 黄色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .waterfall-column {
                display: flex;
                flex-direction: column;
                gap: 1rem;
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-3px);
                box-shadow: 0 8px 15px rgba(0,0,0,0.08);
            }
            .text-balance {
                text-wrap: balance;
            }
            .search-focus {
                transition: all 0.3s ease;
            }
            .search-focus:focus-within {
                box-shadow: 0 0 0 3px rgba(91, 143, 185, 0.2);
            }
            /* 添加紧凑模态框样式 */
            .compact-modal {
                max-width: 700px;
                max-height: 80vh;
            }
            .compact-modal-content {
                padding: 1rem;
            }
            .compact-modal-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 0.75rem;
            }
            .compact-text {
                font-size: 0.875rem;
                line-height: 1.25rem;
            }
            
            /*剧情简介滚动容器样式 */
            .synopsis-container {
                max-height: 100px;
                overflow-y: auto;
                padding-right: 8px;
            }
            /* 滚动条美化 */
            .synopsis-container::-webkit-scrollbar {
                width: 6px;
            }
            .synopsis-container::-webkit-scrollbar-track {
                background: #f1f1f1;
                border-radius: 10px;
            }
            .synopsis-container::-webkit-scrollbar-thumb {
                background: #c1c1c1;
                border-radius: 10px;
            }
            .synopsis-container::-webkit-scrollbar-thumb:hover {
                background: #a1a1a1;
            }
            
            /* 标签折叠区域样式 */
            .tag-collapse {
                transition: all 0.3s ease;
                overflow: hidden;
            }
            .tag-collapse.closed {
                max-height: 0;
                opacity: 0;
            }
            .tag-collapse.open {
                max-height: 500px;
                opacity: 1;
            }
            .collapse-toggle {
                transition: all 0.3s ease;
            }
            .collapse-toggle.closed i {
                transform: rotate(0deg);
            }
            .collapse-toggle.open i {
                transform: rotate(180deg);
            }
			.image-container {
			    overflow: hidden;
			  }
        }
		/*图片查看器样式 */
		.image-viewer-zoom {
		    transition: transform 0.3s ease;
		}
		.image-viewer-zoom:hover {
		    transform: scale(1.03);
		    cursor: zoom-in;
		}
		/* 图片加载动画样式 */
		.image-loading {
		    position: relative;
		    overflow: hidden;
		    background-color: #f3f4f6;
		}
		
		.image-loading::after {
		    content: '';
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    width: 24px;
		    height: 24px;
		    margin: -12px 0 0 -12px;
		    border: 2px solid #e5e7eb;
		    border-top: 2px solid #5B8FB9;
		    border-radius: 50%;
		    animation: spin 1s linear infinite;
		}
		
		@keyframes spin {
		    0% { transform: rotate(0deg); }
		    100% { transform: rotate(360deg); }
		}
    </style>
</head>
<body class="bg-light text-dark">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 bg-white/90 backdrop-blur-sm shadow-sm z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-4">
            <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                <div class="flex items-center gap-2">
                    <i class="fa fa-film text-primary text-2xl"></i>
                    <h1 class="text-xl font-bold text-dark">动漫收藏</h1>
                </div>
                
                <!-- 搜索框 -->
                <div class="relative w-full md:w-64 lg:w-80 search-focus">
                    <input type="text" id="search-input" placeholder="搜索动漫标题、标签..." 
                           class="w-full bg-accent/50 border border-secondary/30 rounded-full py-2 pl-10 pr-4 
                                  focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary/50
                                  text-sm md:text-base transition-all">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-primary/70"></i>
                    <button id="clear-search" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 hidden">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                
                <div class="hidden md:block">
                    <a href="http://www.datazzh.top">
                        <img src="http://www.datazzh.top/wp-content/uploads/2024/07/OIP-C.jpeg" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-primary/30">
                    </a>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-6">
        <!-- 标签筛选器 -->
        <div class="mb-6">
            <div class="flex flex-wrap gap-2" id="tag-filters">
                <button class="tag-btn active bg-primary text-white px-4 py-2 rounded-full text-sm whitespace-nowrap transition-all">
                    全部
                </button>
                <!-- 标签将通过JS动态生成 -->
            </div>
            
            <!-- 标签折叠控制 -->
            <div id="tag-collapse-control" class="mt-2 text-center hidden">
                <button id="toggle-tags" class="text-primary hover:text-primary/80 text-sm font-medium collapse-toggle closed">
                    展开更多标签 <i class="fa fa-chevron-down ml-1 transition-transform"></i>
                </button>
            </div>
        </div>
        
        <!-- 状态筛选 -->
        <div class="mb-4 flex flex-wrap gap-2">
            <button class="status-btn active bg-accent text-dark px-3 py-1 rounded-full text-xs font-medium transition-all">
                全部状态
            </button>
            <button class="status-btn bg-white text-dark border border-gray-200 px-3 py-1 rounded-full text-xs font-medium hover:border-primary/30 transition-all">
                已看完
            </button>
            <button class="status-btn bg-white text-dark border border-gray-200 px-3 py-1 rounded-full text-xs font-medium hover:border-primary/30 transition-all">
                部分观看
            </button>
            <button class="status-btn bg-white text-dark border border-gray-200 px-3 py-1 rounded-full text-xs font-medium hover:border-primary/30 transition-all">
                未看
            </button>
        </div>
        
        <!-- 统计信息 -->
        <div class="mb-6">
            <p class="text-gray-500 text-sm">
                共找到 <span id="total-count" class="text-primary font-medium">0</span> 部动漫
                <span id="search-query" class="hidden text-gray-600">，搜索 "<span class="font-medium"></span>"</span>
                <span id="filter-info" class="hidden text-gray-600">，筛选 "<span class="font-medium"></span>"</span>
            </p>
        </div>
        
        <!-- 布局容器 -->
        <div id="anime-grid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
            <!-- 卡片将直接动态插入到这里 -->
        </div>
        
        <!-- 空状态 -->
        <div id="empty-state" class="hidden py-20 text-center">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 text-primary mb-4">
                <i class="fa fa-search text-2xl"></i>
            </div>
            <h3 class="text-lg font-medium mb-2">未找到匹配的动漫</h3>
            <p class="text-gray-500 max-w-md mx-auto">尝试使用不同的搜索词或清除筛选条件</p>
            <button id="reset-filters" class="mt-4 text-primary hover:text-primary/80 text-sm font-medium">
                清除所有筛选 <i class="fa fa-refresh ml-1"></i>
            </button>
        </div>
        
        <!-- 加载状态 -->
        <div id="loading" class="mt-12 text-center hidden">
            <div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary"></div>
            <p class="mt-3 text-gray-500 text-sm">加载中...</p>
        </div>
    </main>

    <!-- 底部信息 -->
    <footer class="bg-white border-t border-gray-100 py-6 mt-12">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center gap-4">
                <div class="flex items-center gap-2">
                    <i class="fa fa-film text-primary/70"></i>
                    <span class="font-medium text-gray-600">动漫收藏</span>
                </div>
                
                <div class="text-gray-500 text-sm">
                    &copy; datazzh动漫收藏. 记录每一部精彩瞬间.
                </div>
            </div>
        </div>
    </footer>

    <!-- 动漫详情模态框 -->
    <div id="anime-modal" class="fixed inset-0 z-50 flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300">
        <div class="absolute inset-0 bg-black/60 backdrop-blur-[2px]" id="modal-backdrop"></div>
        <div class="relative bg-white rounded-xl w-full max-w-4xl overflow-auto m-4 shadow-xl transform transition-all scale-95 opacity-0 duration-300 max-h-[90vh]" id="modal-content-wrapper">
            <div id="modal-content" class="p-4">
                <!-- 模态框内容将通过JS动态生成 -->
            </div>
        </div>
    </div>
	<!-- 图片查看器模态框 -->
	<div id="image-viewer" class="fixed inset-0 z-50 flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300">
	    <div class="absolute inset-0 bg-black/90 backdrop-blur-[2px]" id="image-viewer-backdrop"></div>
	    <div class="relative max-w-5xl max-h-[90vh] p-4">
	        <button id="close-image-viewer" class="absolute -top-12 right-0 bg-black/50 hover:bg-black/70 text-white w-10 h-10 rounded-full flex items-center justify-center z-10 transition-colors">
	            <i class="fa fa-times text-xl"></i>
	        </button>
	        <img id="viewer-image" src="" alt="大图预览" class="max-w-full max-h-[90vh] object-contain">
	    </div>
	</div>

    <script>
        // 全局变量
        let allAnime = [];
        let filteredAnime = [];
        let allTags = new Set();
        let currentTag = '全部';
        let currentStatus = '全部状态';
        let searchQuery = '';
        let tagsCollapsed = true; // 标签折叠状态
        
        // DOM元素
        const totalCountElement = document.getElementById('total-count');
        const emptyState = document.getElementById('empty-state');
        const loadingElement = document.getElementById('loading');
        const searchInput = document.getElementById('search-input');
        const clearSearch = document.getElementById('clear-search');
        const searchQueryElement = document.getElementById('search-query');
        const filterInfoElement = document.getElementById('filter-info');
        const resetFiltersButton = document.getElementById('reset-filters');
        const animeModal = document.getElementById('anime-modal');
        const modalContent = document.getElementById('modal-content');
        const modalContentWrapper = document.getElementById('modal-content-wrapper');
        const modalBackdrop = document.getElementById('modal-backdrop');
        const tagFiltersContainer = document.getElementById('tag-filters');
        const tagCollapseControl = document.getElementById('tag-collapse-control');
        const toggleTagsButton = document.getElementById('toggle-tags');
        const tagCollapseArea = document.createElement('div'); // 创建标签折叠区域

		const imageViewer = document.getElementById('image-viewer');
		const imageViewerBackdrop = document.getElementById('image-viewer-backdrop');
		const viewerImage = document.getElementById('viewer-image');
		const closeImageViewer = document.getElementById('close-image-viewer');
		
        // 初始化页面
        init();
        
        // 初始化函数
        async function init() {
            showLoading();
            try {
                const response = await fetch('anime-data.json');
                allAnime = await response.json();
                extractAllTags(allAnime);
                generateTagButtons();
                filteredAnime = [...allAnime];
                renderAnimeCards(filteredAnime);
                updateTotalCount();
            } catch (error) {
                console.error('加载数据失败:', error);
                showErrorState();
            } finally {
                hideLoading();
            }
            bindEvents();
        }
        
        // 生成星级评分
        function generateStarRating(star) {
            const stars = star;
            let html = '';
            const fullStars = Math.floor(stars);
            const hasHalfStar = stars % 1 >= 0.5;
            const emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0);
            
            for (let i = 0; i < fullStars; i++) {
                html += '<i class="fa fa-star text-yellow-400"></i>';
            }
            if (hasHalfStar) {
                html += '<i class="fa fa-star-half-o text-yellow-400"></i>';
            }
            for (let i = 0; i < emptyStars; i++) {
                html += '<i class="fa fa-star-o text-yellow-400"></i>';
            }
            return html;
        }
        
        // 提取所有唯一标签
        function extractAllTags(animes) {
            animes.forEach(anime => {
                if (anime.tags && anime.tags.length > 0) {
                    anime.tags.forEach(tag => allTags.add(tag));
                }
            });
        }
        
        // 生成标签筛选按钮
        function generateTagButtons() {
            // 先清空容器
            tagFiltersContainer.innerHTML = '';
            
            // 创建"全部"按钮
            const allButton = document.createElement('button');
            allButton.className = 'tag-btn active bg-primary text-white px-4 py-2 rounded-full text-sm whitespace-nowrap transition-all';
            allButton.textContent = '全部';
            
            allButton.addEventListener('click', function() {
                currentTag = '全部';
                updateTagButtons();
                filterAnime();
            });
            
            tagFiltersContainer.appendChild(allButton);
            
            // 设置标签折叠区域
            tagCollapseArea.className = 'tag-collapse closed w-full mt-2';
            tagCollapseArea.style.transition = 'max-height 0.3s ease, opacity 0.3s ease';
            
            // 添加其他标签按钮
            const tagsArray = Array.from(allTags);
            
            // 如果标签数量超过8个，启用折叠功能
            if (tagsArray.length > 8) {
                // 前8个标签直接显示
                for (let i = 0; i < Math.min(8, tagsArray.length); i++) {
                    const tag = tagsArray[i];
                    createTagButton(tag, tagFiltersContainer);
                }
                
                // 剩余的标签放入折叠区域
                const collapseContainer = document.createElement('div');
                collapseContainer.className = 'flex flex-wrap gap-2';
                
                for (let i = 8; i < tagsArray.length; i++) {
                    const tag = tagsArray[i];
                    createTagButton(tag, collapseContainer);
                }
                
                tagCollapseArea.appendChild(collapseContainer);
                tagFiltersContainer.appendChild(tagCollapseArea);
                
                // 显示折叠控制按钮
                tagCollapseControl.classList.remove('hidden');
            } else {
                // 标签数量少，直接全部显示
                tagsArray.forEach(tag => {
                    createTagButton(tag, tagFiltersContainer);
                });
                tagCollapseControl.classList.add('hidden');
            }
        }
        
        // 创建标签按钮的辅助函数
        function createTagButton(tag, container) {
            const button = document.createElement('button');
            button.className = 'tag-btn bg-white text-dark border border-gray-200 px-4 py-2 rounded-full text-sm whitespace-nowrap hover:border-primary/30 transition-all';
            button.textContent = tag;
            
            button.addEventListener('click', function() {
                currentTag = this.textContent.trim();
                updateTagButtons();
                filterAnime();
            });
            
            container.appendChild(button);
        }
        
        // 切换标签折叠状态
        function toggleTags() {
            tagsCollapsed = !tagsCollapsed;
            
            if (tagsCollapsed) {
                tagCollapseArea.classList.remove('open');
                tagCollapseArea.classList.add('closed');
                toggleTagsButton.classList.remove('open');
                toggleTagsButton.classList.add('closed');
                toggleTagsButton.innerHTML = '展开更多标签 <i class="fa fa-chevron-down ml-1 transition-transform"></i>';
            } else {
                tagCollapseArea.classList.remove('closed');
                tagCollapseArea.classList.add('open');
                toggleTagsButton.classList.remove('closed');
                toggleTagsButton.classList.add('open');
                toggleTagsButton.innerHTML = '收起标签 <i class="fa fa-chevron-up ml-1 transition-transform"></i>';
            }
        }
        
        // 绑定事件
        function bindEvents() {
            searchInput.addEventListener('input', handleSearch);
            clearSearch.addEventListener('click', clearSearchInput);
            
            document.querySelectorAll('.status-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    currentStatus = this.textContent.trim();
                    updateStatusButtons();
                    filterAnime();
                });
            });
            
            resetFiltersButton.addEventListener('click', resetFilters);
            modalBackdrop.addEventListener('click', closeAnimeModal);
            
            // 绑定标签折叠按钮事件
            toggleTagsButton.addEventListener('click', toggleTags);
			
			// 图片查看器事件
			imageViewerBackdrop.addEventListener('click', closeImageViewerModal);
			closeImageViewer.addEventListener('click', closeImageViewerModal);
			
			// 为所有图片添加点击事件委托
			document.addEventListener('click', function(e) {
				const img = e.target.closest('img[data-viewable="true"]');
				if (img) {
					e.stopPropagation();
					openImageViewer(img.src);
				}
			});
        }
        
        // 渲染动漫卡片
        function renderAnimeCards(animes) {
            const gridContainer = document.getElementById('anime-grid');
            gridContainer.innerHTML = ''; // 清空容器
                
            if (animes.length === 0) {
                showEmptyState();
                return;
            }
                
            hideEmptyState();
                
            // 直接按顺序插入卡片，CSS Grid会自动排列
            animes.forEach(anime => {
                const card = createAnimeCard(anime);
                gridContainer.appendChild(card);
            });
        }
        
        // 创建动漫卡片
        function createAnimeCard(anime) {
            const card = document.createElement('div');
            card.className = 'bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100 card-hover cursor-pointer';
            card.setAttribute('data-id', anime.id);
            
            // 根据状态设置不同的颜色
            let statusClass = '';
            let statusColor = '';
            if (anime.status === '已看完') {
                statusClass = 'bg-watched';
                statusColor = 'watched';
            } else if (anime.status === '部分观看') {
                statusClass = 'bg-watching';
                statusColor = 'watching';
            } else {
                statusClass = 'bg-notWatched';
                statusColor = 'notWatched';
            }
            
            // 计算总集数
            const totalEpisodes = anime.seasons.reduce((total, season) => {
                return total + (season.episodes === '剧场版' ? 1 : parseInt(season.episodes || 0));
            }, 0);
            
            card.innerHTML = `
                <div class="relative">
                    <div class="image-loading aspect-[2/3]">
                        <img src="${anime.image}" alt="${anime.title}" 
                             class="w-full h-full object-cover opacity-0 transition-opacity duration-300"
                             onload="this.classList.remove('opacity-0'); this.parentElement.classList.remove('image-loading')">
                    </div>
                    <div class="absolute top-2 left-2 ${statusClass} text-white text-xs px-2 py-0.5 rounded-full shadow-sm">
                        ${anime.status}
                    </div>
                    <!-- 显示总季数或剧场版 -->
                    <div class="absolute top-2 right-2 bg-black/60 text-white text-xs px-2 py-0.5 rounded-full shadow-sm">
                        ${anime.seasons.length > 1 ? `共${anime.seasons.length}季` : 
                          (anime.seasons[0].episodes === '剧场版' ? '剧场版' : 'TV')}
                    </div>
                    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent p-3">
                        <h3 class="text-white font-bold text-shadow line-clamp-1 text-sm">${anime.title}</h3>
                        <div class="flex flex-wrap gap-1 mt-1">
                            ${anime.tags.slice(0, 4).map(tag => `
                                <span class="bg-white/20 backdrop-blur-sm text-white/90 text-xs px-2 py-0.5 rounded-full">${tag}</span>
                            `).join('')}
                            ${anime.tags.length > 4 ? `<span class="bg-white/20 backdrop-blur-sm text-white/90 text-xs px-2 py-0.5 rounded-full">+${anime.tags.length - 4}</span>` : ''}
                        </div>
                    </div>
                </div>
                <div class="p-3">
                    <div class="flex justify-between items-center">
                        <div class="flex items-center">
                            <span class="text-xs font-medium">${generateStarRating(anime.star)}</span>
                        </div>
                        <span class="text-xs text-gray-500">${totalEpisodes} 集</span>
                    </div>
                </div>
            `;
            
            card.addEventListener('click', () => openAnimeModal(anime));
            return card;
        }
        
        // 打开动漫详情模态框
        function openAnimeModal(anime) {
            const modalContent = document.getElementById('modal-content');
            if (anime.seasons.length === 1) {
                modalContent.classList.add('p-0'); // 单季移除内边距
            } else {
                modalContent.classList.remove('p-0'); // 多季保留内边距
            }

            // 检查季数
            if (anime.seasons.length === 1) {
            // 单季布局
            const season = anime.seasons[0];
            modalContent.innerHTML = `
                <div class="flex flex-col md:flex-row h-full max-h-[80vh] md:max-h-none overflow-y-auto">
                    <!-- 左侧图片区域 - 无内边距 -->
                    <div class="w-full md:w-2/5 lg:w-1/3 h-64 md:h-auto relative flex-shrink-0 image-container image-loading">
                        <img src="${season.image || anime.image}" alt="${anime.title}" 
                             class="absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-300 image-viewer-zoom" 
                             data-viewable="true"
                             onload="this.classList.remove('opacity-0'); this.parentElement.classList.remove('image-loading')">
                    </div>
                    
                    <!-- 右侧内容区域 -->
                    <div class="w-full md:w-3/5 lg:w-2/3 p-6 overflow-y-auto">
                        <!-- 关闭按钮放在右上角 -->
                        <button id="close-modal-inner" class="absolute top-4 right-4 bg-white/80 backdrop-blur-sm text-gray-600 w-8 h-8 rounded-full flex items-center justify-center z-10 hover:bg-white transition-colors">
                            <i class="fa fa-times"></i>
                        </button>
                        
                        <h2 class="text-xl md:text-2xl font-bold mb-2 pr-6">${anime.title}</h2>
                        
                        <div class="flex flex-wrap gap-2 mb-4">
                            ${anime.tags.map(tag => `
                                <span class="bg-accent text-dark text-xs px-3 py-1 rounded-full">${tag}</span>
                            `).join('')}
                        </div>
                        
                        <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mb-6 text-sm">
                            <div class="bg-gray-50 p-3 rounded-lg">
                                <p class="text-gray-500">状态</p>
                                <p class="font-medium">${season.status}</p>
                            </div>
                            <div class="bg-gray-50 p-3 rounded-lg">
                                <p class="text-gray-500">评分</p>
                                <p class="font-medium flex items-center">
                                    ${generateStarRating(season.star)}
                                </p>
                            </div>
                            <div class="bg-gray-50 p-3 rounded-lg">
                                <p class="text-gray-500">集数</p>
                                <p class="font-medium">${season.episodes}</p>
                            </div>
                            <div class="bg-gray-50 p-3 rounded-lg">
                                <p class="text-gray-500">播出年份</p>
                                <p class="font-medium">${season.airing}</p>
                            </div>
                            <div class="bg-gray-50 p-3 rounded-lg col-span-2 sm:col-span-1">
                                <p class="text-gray-500">导演</p>
                                <p class="font-medium">${anime.director}</p>
                            </div>
                        </div>
                        
                        <div>
                            <h3 class="text-base font-bold mb-2 flex items-center">
                                <i class="fa fa-info-circle text-primary mr-2"></i> 剧情简介
                            </h3>
                        <div class="hidden md:block synopsis-container">
                            <p class="text-gray-700 leading-relaxed text-sm md:text-base">${season.description || anime.description}</p>
                        </div>
                        <div class="md:hidden">
                            <p class="text-gray-700 leading-relaxed text-sm md:text-base">${season.description || anime.description}</p>
                        </div>
                        </div>
                    </div>
                </div>
            `;
            
            // 添加内部关闭按钮事件
            document.getElementById('close-modal-inner').addEventListener('click', closeAnimeModal);
            } else {
                // 多季布局
                let currentSeason = anime.seasons[0];
                    
                modalContent.innerHTML = `
                    <div class="space-y-3">
                        <!-- 顶部标题和基本信息 -->
                        <button id="close-modal-inner" class="absolute top-4 right-4 bg-white/80 backdrop-blur-sm text-gray-600 w-8 h-8 rounded-full flex items-center justify-center z-10 hover:bg-white transition-colors">
                            <i class="fa fa-times"></i>
                        </button>
                        <div class="flex flex-col md:flex-row gap-6">
                            <div class="image-container image-loading">
                                <img id="modal-season-image" src="${currentSeason.image || anime.image}" alt="${anime.title}" 
                                     class="w-full md:w-64 h-80 object-cover rounded-lg shadow-md opacity-0 transition-opacity duration-300 image-viewer-zoom" 
                                     data-viewable="true"
                                     onload="this.classList.remove('opacity-0'); this.parentElement.classList.remove('image-loading')">
                            </div>
                            
                            <div class="flex-1">
                                <h2 class="text-2xl font-bold mb-2">${anime.title}</h2>
                                <div class="flex flex-wrap gap-2 mb-4">
                                    ${anime.tags.map(tag => `
                                        <span class="bg-accent text-dark text-sm px-3 py-1 rounded-full">${tag}</span>
                                    `).join('')}
                                </div>
                                
                                <div class="grid grid-cols-2 gap-4 mb-4">
                                    <div>
                                        <p class="text-gray-500 text-sm">导演</p>
                                        <p class="font-medium">${anime.director}</p>
                                    </div>
                                    <div>
                                        <p class="text-gray-500 text-sm">综合评分</p>
                                        <p class="font-medium">${generateStarRating(anime.star)}</p>
                                    </div>
                                </div>
                                
                                <!-- 季数选择 -->
                                <div class="mb-4">
                                    <h3 class="text-lg font-bold mb-3">季数详情</h3>
                                    <div class="flex flex-wrap gap-2">
                                        ${anime.seasons.map(season => {
                                            let btnClass = 'bg-gray-100 text-gray-700';
                                            if (season.status === '已看完') btnClass = 'bg-green-100 text-green-700';
                                            else if (season.status === '部分观看') btnClass = 'bg-blue-100 text-blue-700';
                                            else if (season.status === '未看') btnClass = 'bg-yellow-100 text-yellow-700';
                                            
                                            return `
                                                <button class="season-btn px-4 py-2 rounded-lg text-sm font-medium transition-all ${btnClass} hover:shadow-sm"
                                                        data-season="${season.season}">
                                                    ${season.title || `第${season.season}季`}
                                                </button>
                                            `;
                                        }).join('')}
                                    </div>
                                </div>
                                
                                <!-- 当前季详情部分 -->
                                <div class="bg-gray-50 p-4 rounded-lg">
                                    <div id="season-details" class="flex flex-wrap gap-4">
                                        <div class="flex flex-col">
                                            <span class="text-gray-500 text-sm">集数</span>
                                            <span class="font-medium">${currentSeason.episodes}</span>
                                        </div>
                                        <div class="flex flex-col">
                                            <span class="text-gray-500 text-sm">播出时间</span>
                                            <span class="font-medium">${currentSeason.airing}</span>
                                        </div>
                                        <div class="flex flex-col">
                                            <span class="text-gray-500 text-sm">状态</span>
                                            <span class="font-medium">
                                                <span class="text-sm px-2 py-0.5 rounded-full ${currentSeason.status === '已看完' ? 'bg-green-100 text-green-800' : currentSeason.status === '部分观看' ? 'bg-blue-100 text-blue-800' : 'bg-yellow-100 text-yellow-800'}">
                                                    ${currentSeason.status}
                                                </span>
                                            </span>
                                        </div>
                                        <div class="flex flex-col">
                                            <span class="text-gray-500 text-sm">评分</span>
                                            <span class="font-medium">${generateStarRating(currentSeason.star)}</span>
                                        </div>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 剧情简介 -->
                        <div>
                            <h3 class="text-lg font-bold mb-3">剧情简介</h3>
                            <div class="hidden md:block synopsis-container">
                                <p id="modal-season-description" class="text-gray-700 leading-relaxed">${currentSeason.description || anime.description}</p>
                            </div>
                            <div class="md:hidden">
                                <p id="modal-season-description" class="text-gray-700 leading-relaxed">${currentSeason.description || anime.description}</p>
                            </div>
                        </div>
                    </div>
                `;
                
                // 添加季点击事件（仅多季布局需要）
                document.querySelectorAll('.season-btn').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const season = this.dataset.season;
                        const selectedSeason = anime.seasons.find(s => s.season == season);
                        
                        // 更新按钮激活状态
                        document.querySelectorAll('.season-btn').forEach(b => {
                            b.classList.remove('bg-primary/10', 'ring-2', 'ring-primary/50');
                        });
                        this.classList.add('bg-primary/10', 'ring-2', 'ring-primary/50');
                        
                        // 更新图片和详情
                        document.getElementById('modal-season-image').src = selectedSeason.image || anime.image;
                        document.getElementById('modal-season-description').textContent = 
                            selectedSeason.description || anime.description;
                        
                        // 更新季详情
                        const seasonDetails = document.getElementById('season-details');
                        seasonDetails.innerHTML = `
                            <div class="flex flex-col">
                                <span class="text-gray-500 text-sm">集数</span>
                                <span class="font-medium">${selectedSeason.episodes}</span>
                            </div>
                            <div class="flex flex-col">
                                <span class="text-gray-500 text-sm">播出时间</span>
                                <span class="font-medium">${selectedSeason.airing}</span>
                            </div>

                            <div class="flex flex-col">
                                <span class="text-gray-500 text-sm">状态</span>
                                <span class="font-medium">
                                    <span class="text-sm px-2 py-0.5 rounded-full ${selectedSeason.status === '已看完' ? 'bg-green-100 text-green-800' : selectedSeason.status === '部分观看' ? 'bg-blue-100 text-blue-800' : 'bg-yellow-100 text-yellow-800'}">
                                        ${selectedSeason.status}
                                    </span>
                                </span>
                            </div>
                            <div class="flex flex-col">
                                <span class="text-gray-500 text-sm">评分</span>
                                <span class="font-medium">${generateStarRating(selectedSeason.star)}</span>
                            </div>
                        `;
                            
                        // 更新季详情和剧情简介
                        const desktopDesc = document.querySelector('.synopsis-container #modal-season-description');
                        const mobileDesc = document.querySelector('.md\\:hidden #modal-season-description');
                        
                        if (desktopDesc) {
                            desktopDesc.innerHTML = selectedSeason.description || anime.description;
                        }
                        if (mobileDesc) {
                            mobileDesc.innerHTML = selectedSeason.description || anime.description;
                        }
						
						const img = document.getElementById('modal-season-image');
						img.classList.add('image-viewer-zoom');
						img.setAttribute('data-viewable', 'true');
                    });
                });
                
                // 默认激活第一季
                document.querySelector('.season-btn')?.classList.add('bg-primary/10', 'ring-2', 'ring-primary/50');
            }
            // 绑定关闭按钮事件
            document.getElementById('close-modal-inner')?.addEventListener('click', closeAnimeModal);
            // 显示模态框
            animeModal.classList.remove('opacity-0', 'pointer-events-none');
            setTimeout(() => {
                modalContentWrapper.classList.remove('scale-95', 'opacity-0');
                modalContentWrapper.classList.add('scale-100', 'opacity-100');
            }, 10);
            document.body.style.overflow = 'hidden';
        }
        
        // 关闭动漫详情模态框
        function closeAnimeModal() {
            modalContentWrapper.classList.remove('scale-100', 'opacity-100');
            modalContentWrapper.classList.add('scale-95', 'opacity-0');
            
            setTimeout(() => {
                animeModal.classList.add('opacity-0', 'pointer-events-none');
                document.body.style.overflow = '';
            }, 300);
        }
        
		// 图片查看器相关函数
		function openImageViewer(src) {
		    viewerImage.src = src;
		    imageViewer.classList.remove('opacity-0', 'pointer-events-none');
		    document.body.style.overflow = 'hidden';
		}
		
		function closeImageViewerModal() {
		    imageViewer.classList.add('opacity-0', 'pointer-events-none');
		    document.body.style.overflow = '';
		}
		
        // 处理搜索
        function handleSearch() {
            searchQuery = searchInput.value.trim().toLowerCase();
            clearSearch.classList.toggle('hidden', !searchQuery);
            filterAnime();
        }
        
        // 清除搜索输入
        function clearSearchInput() {
            searchInput.value = '';
            searchQuery = '';
            clearSearch.classList.add('hidden');
            filterAnime();
        }
        
        // 筛选动漫
        function filterAnime() {
            let result = [...allAnime];
            
            // 按标签筛选
            if (currentTag !== '全部') {
                result = result.filter(anime => 
                    anime.tags && anime.tags.includes(currentTag)
                );
            }
            
            // 按状态筛选
            if (currentStatus !== '全部状态') {
                result = result.filter(anime => anime.status === currentStatus);
            }
            
            // 按搜索词筛选
            if (searchQuery) {
                const query = searchQuery.toLowerCase();
                result = result.filter(anime => 
                    anime.title.toLowerCase().includes(query) ||
                    (anime.tags && anime.tags.some(tag => tag.toLowerCase().includes(query)))
                );
            }
            
            filteredAnime = result;
            renderAnimeCards(filteredAnime);
            updateTotalCount();
            updateFilterInfo();
        }
        
        // 更新标签按钮状态
        function updateTagButtons() {
            document.querySelectorAll('.tag-btn').forEach(btn => {
                if (btn.textContent.trim() === currentTag) {
                    btn.classList.add('active', 'bg-primary', 'text-white');
                    btn.classList.remove('bg-white', 'text-dark', 'border', 'border-gray-200', 'hover:border-primary/30');
                } else {
                    btn.classList.remove('active', 'bg-primary', 'text-white');
                    btn.classList.add('bg-white', 'text-dark', 'border', 'border-gray-200', 'hover:border-primary/30');
                }
            });
        }
        
        // 更新状态按钮状态
        function updateStatusButtons() {
            document.querySelectorAll('.status-btn').forEach(btn => {
                if (btn.textContent.trim() === currentStatus) {
                    btn.classList.add('active', 'bg-accent', 'text-dark');
                    btn.classList.remove('bg-white', 'text-dark', 'border', 'border-gray-200', 'hover:border-primary/30');
                } else {
                    btn.classList.remove('active', 'bg-accent', 'text-dark');
                    btn.classList.add('bg-white', 'text-dark', 'border', 'border-gray-200', 'hover:border-primary/30');
                }
            });
        }
        
        // 重置所有筛选条件
        function resetFilters() {
            currentTag = '全部';
            currentStatus = '全部状态';
            searchQuery = '';
            searchInput.value = '';
            clearSearch.classList.add('hidden');
            
            updateTagButtons();
            updateStatusButtons();
            filterAnime();
        }
        
        // 更新总数显示
        function updateTotalCount() {
            totalCountElement.textContent = filteredAnime.length;
        }
        
        // 更新筛选信息显示
        function updateFilterInfo() {
            searchQueryElement.classList.add('hidden');
            filterInfoElement.classList.add('hidden');
            
            if (searchQuery) {
                searchQueryElement.classList.remove('hidden');
                searchQueryElement.querySelector('span').textContent = searchQuery;
                return;
            }
            
            if (currentTag !== '全部') {
                filterInfoElement.classList.remove('hidden');
                filterInfoElement.querySelector('span').textContent = currentTag;
            } else if (currentStatus !== '全部状态') {
                filterInfoElement.classList.remove('hidden');
                filterInfoElement.querySelector('span').textContent = currentStatus;
            }
        }
        
        // 显示/隐藏状态函数
        function showLoading() { loadingElement.classList.remove('hidden'); }
        function hideLoading() { loadingElement.classList.add('hidden'); }
        function showEmptyState() { emptyState.classList.remove('hidden'); }
        function hideEmptyState() { emptyState.classList.add('hidden'); }
        
        function showErrorState() {
            emptyState.querySelector('h3').textContent = '加载失败';
            emptyState.querySelector('p').textContent = '无法加载动漫数据，请稍后再试';
            resetFiltersButton.innerHTML = '重试 <i class="fa fa-refresh ml-1"></i>';
            resetFiltersButton.onclick = init;
            showEmptyState();
        }
    </script>
</body>
</html>